.padding (@padding, @default) {
  padding: ~"@{padding}px";
  padding: var(@padding, @default);
}

.padding-horizontal (@padding, @default) {
  padding: 0 ~"@{padding}px";
  padding: 0 var(@padding, @default);
}

.padding-vertical (@padding, @default) {
  padding: ~"@{padding}px" 0;
  padding: var(@padding, @default) 0;
}

.margin-horizontal (@margin, @default) {
  margin: 0 ~"@{margin}px";
  margin: 0 var(@margin, @default);
}

.margin-vertical (@margin, @default) {
  margin: ~"@{margin}px" 0;
  margin: var(@margin, @default) 0;
}

.margin (@margin, @default) {
  margin: ~"@{margin}px";
  margin: var(@margin, @default);
}

.margin-loss-horizontal (@margin, @default) {
  margin: 0 ~"-@{margin}px";
  margin: 0 calc(var(@margin, @default) * -1);
}

.margin-loss-vertical (@margin, @default) {
  margin: ~"-@{margin}px" 0;
  margin: calc(var(@margin, @default) * -1) 0;
}

.margin-loss (@margin, @default) {
  margin: ~"-@{margin}px";
  margin: calc(var(@margin, @default) * -1);
}


.grid-gap (@margin, @default) {
  // grid-gap: @default;
  grid-gap: var(@margin, @default);
}

